<template>
	<div class="login-content">
		<div class="login-cont">
			<div class="login-banner">
				<img src="../assets/img/login_banner.png" alt="">
			</div>
			<div class="login-form">
				<div class="form-title">登录</div>
				<!-- <el-tabs :stretch="true" v-model="activeName"> -->
				<!-- <el-tab-pane label="用户登录" name="1"> -->
				<el-form label-position="top" ref="form" :model="loginForm" label-width="80px" :rules="rules">
					<el-form-item label="请输入常用手机号/学号" prop="username">
						<el-input v-model="loginForm.username"></el-input>
					</el-form-item>
					<el-form-item label-position="top" label="请输入密码" prop="password">
						<el-input show-password v-model="loginForm.password"></el-input>
					</el-form-item>
					<el-form-item label-position="top" label="请选择省份">
						<el-select v-model="province" placeholder="请选择所在省份" @change="provinceChange">
							<el-option v-for="item in provinceList" :label="item.deptName" :value="item.deptId"></el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="所在院校" prop="deptId">
						<el-select v-model="loginForm.deptId" placeholder="请选择所在院校">
							<el-option v-for="item in school" :label="item.deptName" :value="item.deptId"></el-option>
						</el-select>

					</el-form-item>
					<div class="no-school">
						如未找到学校，请 <span @click="goPage('/Feedback')">反馈</span>
					</div>
					<div class="password-set">
						<el-checkbox v-model="remember">记住密码</el-checkbox>
						<!-- <span class="forget">忘记密码</span> -->
					</div>
					<el-form-item>
						<el-button class="login-btn" type="primary" @click="submitForm('form')">登录</el-button>
					</el-form-item>
					<div class="go-register">
						<span>没用账号？</span>
						<span class="register-btn" @click="goPageReplace('/Register')">去注册</span>
					</div>
				</el-form>
				<!-- </el-tab-pane> -->
				<!-- </el-tabs> -->
			</div>
		</div>
		<el-dialog title="" :visible.sync="showHint" width="300" custom-class="no-ip">
			<span slot="title" class="dialog-title">
				一温馨提示一
			</span>
			<p class="hint-txt">对不起，您当前访问所用网络（IP: {{ip}}不是<span style="color: #ff9400;">校园网</span>，如您已有账号，请直接登录使用，无账号请注册后登录
			</p>
			<p class="hint-txt">其他使用问题也可来电咨询：<span style="color: #ff9400;">400-808-9682</span></p>
			<p class="hint-txt">如需要观看更多内容和了解更多服务，请点击下方反馈按钮，像图书馆反应您的需求，以让图书馆作为资源引进参考，谢谢</p>
			<!-- <p class="hint-txt">信息素养公益大讲堂为免费学习资料，如需观看请<span style="color: #ff9400;cursor: pointer;"
					@click="goPage('/InfoHome')">点击</span></p> -->
			<span slot="footer" class="dialog-footer">
				<div class="go-feed" @click="goPage('/Feedback')">问题反馈</div>
				<div class="footer-btn">
					<el-button type="warning" @click="goPageReplace('/Register')" plain round>注册</el-button>
					<el-button type="warning" @click="showHint=false" round>登录</el-button>
				</div>

			</span>
		</el-dialog>
	</div>
</template>

<script>
	import {
		loginApi,
		getSchoolTreeApi,
		getProvinceApi,
		getSchoolApi
	} from '@/api/Login'
	import {
		getUserInfoApi
	} from '@/api/UserInfo'
	export default {
		data() {
			return {
				rules: {
					username: [{
						required: true,
						message: '请输入常用手机号/学号',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}],
					deptId: [{
						required: true,
						message: '请选择所在院校',
						trigger: 'change'
					}],
				},
				loginForm: this.$cookies.get('sy_login') || {},
				activeName: '1',
				schoolTree: [],
				provinceList: [],
				province: 118,
				school: [],
				remember: false,
				showHint: false,
				ip: ''
			}
		},
		created() {
			// this.getSchoolTree()
			this.getProvince()
			if (this.province) {
				this.getSchoolList()
			}
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.login()
					} else {
						return false;
					}
				});
			},
			provinceChange() {
				this.getSchoolList()
			},
			getSchoolList() {
				getSchoolApi({
					deptid: this.province
				}).then(res => {
					this.school = res.data
				})
			},
			getProvince() {
				getProvinceApi().then(res => {
					this.provinceList = res.data
				})
			},
			getSchoolTree() {
				getSchoolTreeApi().then(res => {
					let list = res.data
					this.schoolTree = list
				})
			},
			login() {
				loginApi(this.loginForm).then(res => {
					if (res.code == 200) {

						if (this.remember) {
							this.$cookies.set('sy_login', this.loginForm)
						} else {
							this.$cookies.remove('sy_login')
						}

						this.$cookies.set('sy_token', res.token)
						this.$store.commit('SET_TOKEN', res.token)
						// console.log(this.$router)
						this.getUserInfo()
					} else if (res.code == 777) {
						this.ip = res.msg
						this.showHint = true
					}
				})
			},
			getUserInfo() {
				getUserInfoApi().then(res => {
					this.$message({
						message: '登录成功',
						type: 'success'
					})
					this.info = res.data
					let avatar = res.data.avatar
					this.$store.commit('SET_AVATAR', avatar)
					this.$cookies.set('sy_avatar', avatar)
					this.$store.commit('SET_NICKNAME', res.data.nickName)
					this.$cookies.set('sy_username', res.data.nickName)
					this.$store.commit('SET_USERINFO', res.data)
					this.$cookies.set('sy_userInfo', res.data)
					setTimeout(() => {
						this.$router.back()
					}, 500)
				})
			},
			goPage(url, query) {
				this.$router.push({
					path: url,
					query: query
				})
			},
			goPageReplace(url, query) {
				this.$router.replace({
					path: url,
					query: query
				})
			}
		},
		watch: {
			$route: {
				handler: function(to, from) {
					console.log(to, from)
				},
				immediate: true
			}
		}
	}
</script>

<style lang="less">
	@contWidth: 1100px;

	.login-content {
		height: calc(100vh - 120px);
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #F7F7F7;

		.login-cont {
			width: @contWidth;
			margin: 0 auto;
			display: flex;
			background-color: #fff;
			border-radius: 9px;
			overflow: hidden;
		}

		.login-banner {
			width: 620px;
			// background-color: #5c81ff;
		}

		.login-form {
			flex: 1;
			padding: 40px 30px 0;
			display: flex;
			flex-direction: column;
			// justify-content: center;
			align-items: center;
		}

		.el-form {
			width: 100%;
		}

		.form-title {
			font-size: 29px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: bold;
			color: #0087FF;
			line-height: 40px;
			width: 100%;
			margin-bottom: 10px;
		}

		.el-tabs__nav-wrap::after {
			height: 1px;
			background-color: #D8D8D8;
		}

		.el-tabs {
			width: 100%;
		}

		.el-form--label-top .el-form-item__label {
			line-height: 18px;
			font-size: 13px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #333333;
			padding-bottom: 8px;
		}

		.el-input__inner {
			height: 36px;
			line-height: 36px;
		}

		.el-form-item {
			margin-bottom: 14px;
		}

		.el-select {
			width: 100%;
		}

		.password-set {
			height: 62px;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.el-checkbox__label {
			font-size: 13px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		.forget {
			font-size: 13px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		.login-btn {
			width: 100%;
			height: 36px;
			background: linear-gradient(129deg, #3CA7FF 0%, #0087FF 100%);
			border-radius: 5px;
			line-height: 36px;
			font-size: 13px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			padding: 0;
		}

		.go-register {
			text-align: center;
			font-size: 13px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		.register-btn {
			color: #0087FF;
			cursor: pointer;
		}

		.el-cascader {
			width: 100%;
		}

		.no-ip {
			border-radius: 10px;
			background: linear-gradient(to bottom, #fff6eb, #fff, #fff6eb);

			.el-dialog__header {
				// width: 100%;
				text-align: center;
				line-height: 50px;
			}

			.hint-txt {
				position: relative;
				line-height: 30px;
				font-size: 14px;
				color: #333;
				padding: 0 20px;

				&:before {
					position: absolute;
					left: 0px;
					top: 9px;
					display: block;
					content: "";
					width: 12px;
					height: 12px;
					border-radius: 12px;
					background-color: #333;
				}
			}
		}

		.go-feed {
			font-size: 13px;
			color: #666;
		}

		.dialog-footer {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.footer-btn {
			width: 200px;
			display: flex;
			align-items: center;
		}

		.no-school {
			padding: 0 10px 10px;
			font-size: 13px;
			color: #333;

			span {
				color: #0087FF;
				cursor: pointer;
				text-decoration: underline;
			}
		}
	}
</style>